<template>
  <div class="d-if ai-c">
    <el-select v-model="diyCakeName" placeholder="请选择名称" size="small" class="w-200"
      clearable require @change="diyCakeMeter = ''; handleDiyChange()">
      <el-option v-for="(cake, index) in customCakeTypeList" :key="index" :label="cake.title"
        :value="cake.title"></el-option>
    </el-select>
    <el-input v-model="diyCakeNum" class="w-200 ml-5" maxlength="50"
      placeholder="请输入" type="number" clearable size="small" min="1" @blur="handleDiyChange">
      <template slot="append">个</template>
    </el-input>
    <el-input v-model="diyCakeMeter" class="w-200 ml-5" style="width: 30%; line-height: 0px;" maxlength="50" placeholder="请输入"
      clearable size="small" @keyup.native="limitValue('diyCakeMeter')" @blur="limitValue('diyCakeMeter'); handleMeterBlur(); handleDiyChange()">
      <template slot="append">{{ diyMeterUint }}</template>
    </el-input>
    <template v-if="showCmMeter">
      <span class="fz-14 plr-5">=</span>
      <el-input v-model="diyCakeCmMeter" class="w-200" maxlength="50" placeholder="请输入"
        clearable size="small" @keyup.native="limitValue('diyCakeCmMeter')" @blur="limitValue('diyCakeCmMeter'); handleCmMeterBlur(); handleDiyChange()">
        <template slot="append">厘米</template>
      </el-input>
    </template>
  </div>
</template>

<script>
import { customCakeTypeList } from '@/const'
export default {
  data() {
    return {
      customCakeTypeList,
      diyCakeName: '',
      diyCakeNum: '',
      diyCakeMeter: '',
      diyCakeCmMeter: '',
    };
  },
  computed: {
    diyMeterUint() {
      return this.diyCakeName == "定制多层蛋糕" ? "磅" : "米"
    },
    showCmMeter() {
      return this.diyMeterUint == '米'
    }
  },
  methods: {
    // 定制信息blur
    handleDiyChange() {
      let diyInfo = ''
      if (this.diyCakeName) {
        diyInfo = this.diyCakeName
      }
      if (this.diyCakeNum) {
        diyInfo = diyInfo + this.diyCakeNum + '个'
      }
      if (this.diyCakeMeter) {
        diyInfo = diyInfo + this.diyCakeMeter + this.diyMeterUint
      }
      this.$emit('diyChange', diyInfo)
    },
    // 限制订制蛋糕米数输入内容 
    limitValue(key) {
      this[key] = this[key].replace(/[^+\-*/0-9.]/g, '')
    },
    handleMeterBlur() {
      this.setCmMeterFromMeter()
    },
    // 根据厘米计算米
    handleCmMeterBlur() {
      if (this.diyCakeCmMeter) {
        this.diyCakeMeter = this.diyCakeCmMeter.replace(/[\d.]+/g, (value) => {
          return Number(value) / 100
        })
      }
    },
    // 根据米计算厘米
    setCmMeterFromMeter() {
      if (this.diyCakeMeter) {
        this.diyCakeCmMeter = this.diyCakeMeter.replace(/[\d.]+/g, (value) => {
          return Number(value) * 100
        })
      }
    },
    getDiyData() {
      return {
        diyCakeName: this.diyCakeName,
        diyCakeNum: this.diyCakeNum,
        diyCakeMeter: this.diyCakeMeter,
      }
    },
    setDiyData(data) {
      Object.assign(this, data)
      this.setCmMeterFromMeter()
    }
  }
};
</script>
<style lang="scss" scoped></style>